<template>
  <a
    href="https://masteringnuxt.com/?utm_source=nuxt&utm_medium=link&utm_campaign=pre_launch"
    target="_blank"
    rel="noopener"
    class="block bg-black"
  >
    <div class="container mx-auto px-4 py-2 sm:px-6 lg:px-6 lg:py-3">
      <div
        class="flex items-center justify-between font-medium text-xs md:text-sm lg:text-base text-white"
      >
        <p>
          <span class="font-bold">BLACK FRIDAY</span> - Get <b>35%</b> off your
          Mastering Nuxt license!
        </p>
        <div class="flex items-center">
          <button
            class="bg-orange-500 hover:bg-orange-600 text-white no-underline inline-block font-bold text-xs px-3 py-1 lg:py-2 shadow uppercase rounded hover:shadow-md"
          >
            register now &rarr;
          </button>
        </div>
      </div>
    </div>
  </a>
</template>
